<style include="diagnostics-shared">
  .animation-1 {
    animation: 1s fadeInLine1;
    animation-fill-mode: forwards;
    visibility: hidden;
  }

  .animation-2 {
    animation: 1s fadeInLine2;
    animation-delay: 100ms;
    animation-fill-mode: forwards;
    visibility: hidden;
  }

  .animation-3 {
    animation: 1s fadeInLine3;
    animation-delay: 200ms;
    animation-fill-mode: forwards;
    visibility: hidden;
  }

  .badge-container {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    width: auto;
  }

  .entryRow {
    align-items: center;
    column-gap: 16px;
    display: grid;
    grid-template-columns: minmax(56px, auto) 1fr;
    height: 40px;
  }

  .green {
    border-left: 1px dashed var(--cros-color-positive);
  }

  .line {
    height: 5px;
    margin: 2px 16px;
  }

  .line-container {
    margin-top: 17px;
    position: absolute;
  }

  .red {
    border-left: 1px dashed var(--cros-color-alert);
    position: relative;
  }

  #routine {
    @apply --diagnostics-routine-name-font;
    align-items: center;
    display: inline-flex;
  }

  .failedTestTextContainer {
    margin-left: 8px;
  }

  .routineLink {
    --iron-icon-fill-color: var(--cros-icon-color-primary);
    --iron-icon-height: 16px;
    --iron-icon-width: 16px;
  }

  #status {
    z-index: 1;
  }

  .yellow {
    border-left: 1px dashed #F9AB00;
  }

  #failedTestText {
    color: #5F6368;
    margin-left: 12px;
  }

  @keyframes fadeInLine1 {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
      visibility: visible;
    }
  }

@keyframes fadeInLine2 {
  0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
      visibility: visible;
    }
  }

@keyframes fadeInLine3 {
  0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
      visibility: visible;
    }
  }
</style>
<div class="entryRow">
  <div class="badge-container">
    <text-badge id="status" badge-type="[[badgeType_]]" value="[[badgeText_]]"
        aria-labelledby="routine">
    </text-badge>
  <template is="dom-if" if="[[!shouldHideLines_(testCompleted_)]]">
    <div class="line-container" id="lineContainer"
        hidden$="[[hideVerticalLines]]">
      <div class$="[[getLineClassName_(1, badgeType_)]]"></div>
      <div class$="[[getLineClassName_(2, badgeType_)]]"></div>
      <div class$="[[getLineClassName_(3, badgeType_)]]"></div>
    </div>
  </template>
 </div>
  <div id="routine" aria-hidden="true">
    <span tabindex="0">[[routineType_]]</span>
    <span id="failedTestText" class="failedTestTextContainer"
        hidden$="[[!item.failedTest]]"
        tabindex="0">
      [[computeFailedTestText_(item.failedTest)]]
    </span>
  </div>
</div>
